<template>
  <div class="schedule-container">
    <div class="search-bar">
      <el-form :model="queryParams" inline>
        <el-form-item label="日程标题">
          <el-input v-model="queryParams.title" placeholder="请输入日程标题" clearable />
        </el-form-item>
        <el-form-item label="日程类型">
          <el-select 
            v-model="queryParams.type" 
            placeholder="请选择类型" 
            clearable
            style="width: 120px;"
          >
            <el-option
              v-for="item in Object.values(dict.SCHEDULE_TYPE)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select 
            v-model="queryParams.status" 
            placeholder="请选择状态" 
            clearable
            style="width: 120px;"
          >
            <el-option
              v-for="item in Object.values(dict.SCHEDULE_STATUS)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            popper-class="schedule-date-picker"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="toolbar">
      <el-button type="primary" @click="handleAdd">新建日程</el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="scheduleList"
      border
      style="width: 100%"
    >
      <el-table-column prop="title" label="日程标题" />
      <el-table-column label="日程类型">
        <template #default="{ row }">
          <el-tag :type="getTypeTag(row.type)">
            {{ getDictLabel('SCHEDULE_TYPE', row.type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getDictLabel('SCHEDULE_STATUS', row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="优先级">
        <template #default="{ row }">
          <el-tag :type="getPriorityTag(row.priority)">
            {{ getDictLabel('PRIORITY_LEVEL', row.priority) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="startTime" width="160" />
      <el-table-column label="结束时间" prop="endTime" width="160" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />

    <!-- 日程表单对话框 -->
    <schedule-form
      v-model="showForm"
      :title="formTitle"
      :form-data="formData"
      @success="handleFormSuccess"
    />

    <!-- 日程详情对话框 -->
    <schedule-detail
      v-model="showDetail"
      :schedule-id="currentId"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getScheduleList, deleteSchedule } from '@/api/schedule'
import { getDictLabel } from '@/utils/dictionary'
import dict from '@/constants/dictionary'
import Pagination from '@/components/Pagination/index.vue'
import ScheduleForm from './components/ScheduleForm.vue'
import ScheduleDetail from './components/ScheduleDetail.vue'

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  title: '',
  type: '',
  status: '',
  startTime: '',
  endTime: ''
})

// 日期范围
const dateRange = ref([])

// 数据列表
const scheduleList = ref([])
const total = ref(0)
const loading = ref(false)

// 表单相关
const showForm = ref(false)
const formTitle = ref('')
const formData = ref({})

// 详情相关
const showDetail = ref(false)
const currentId = ref('')

// 标签样式映射函数
const getTypeTag = (type) => {
  const typeTagMap = {
    '1': 'primary',
    '2': 'success', 
    '3': 'warning'
  }
  return typeTagMap[type] || 'info'
}

const getStatusTag = (status) => {
  const statusTagMap = {
    '0': 'info',
    '1': 'warning',
    '2': 'success',
    '3': 'danger'
  }
  return statusTagMap[status] || 'info'
}

const getPriorityTag = (priority) => {
  const priorityTagMap = {
    '0': 'info',
    '1': 'warning',
    '2': 'danger'
  }
  return priorityTagMap[priority] || 'info'
}

// 获取列表数据
const getList = async () => {
  loading.value = true
  try {
    // 处理日期范围
    if (dateRange.value && dateRange.value.length === 2) {
      queryParams.startTime = dateRange.value[0]
      queryParams.endTime = dateRange.value[1]
    } else {
      queryParams.startTime = undefined
      queryParams.endTime = undefined
    }

    const res = await getScheduleList(queryParams)
    if (res.data) {
      scheduleList.value = res.data.records || []
      total.value = parseInt(res.data.total) || 0
    }
  } catch (error) {
    console.error('获取日程列表失败:', error)
    scheduleList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 新增日程
const handleAdd = async () => {
  formTitle.value = '新建日程'
  showForm.value = true
}

// 查询操作
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  dateRange.value = []
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    title: '',
    type: '',
    status: '',
    startTime: '',
    endTime: ''
  })
  getList()
}

// 编辑日程
const handleEdit = (row) => {
  formTitle.value = '编辑日程'
  formData.value = { ...row }
  showForm.value = true
}

// 查看详情
const handleDetail = (row) => {
  currentId.value = row.id
  showDetail.value = true
}

// 删除日程
const handleDelete = (row) => {
  ElMessageBox.confirm('确认要删除该日程吗？', '警告', {
    type: 'warning'
  }).then(async () => {
    try {
      await deleteSchedule(row.id)
      ElMessage.success('删除成功')
      getList()
    } catch (error) {
      console.error('删除日程失败:', error)
    }
  })
}

// 表单提交成功
const handleFormSuccess = () => {
  showForm.value = false
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss">
/* 全局主题切换动画 */
* {
  transition: 
    background-color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out !important;
}

/* 标签切换动画优化 */
.el-tag {
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover::before {
    opacity: 1;
  }
}

/* 表格行悬停动画 */
.el-table__row {
  transition: transform 0.2s ease, background-color 0.3s ease !important;
  
  &:hover {
    transform: translateX(4px);
  }
}

/* 按钮动画效果 */
.el-button {
  transition: all 0.3s ease !important;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 下拉菜单动画 */
.el-select-dropdown {
  transition: 
    opacity 0.3s ease,
    transform 0.3s ease !important;
  
  &.el-popper[data-popper-placement^='bottom'] {
    transform-origin: top !important;
  }
  
  &.el-popper[data-popper-placement^='top'] {
    transform-origin: bottom !important;
  }
}

/* 主题切换时的背景过渡 */
.schedule-container {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: -1;
  }
}

/* 分页器动画 */
.el-pagination {
  .el-pager li {
    transition: all 0.3s ease !important;
    
    &:hover {
      transform: scale(1.05);
    }
    
    &.is-active {
      transform: scale(1.1);
    }
  }
}

/* 输入框焦点动画 */
.el-input__wrapper {
  transition: all 0.3s ease !important;
  
  &.is-focus {
    transform: translateY(-1px);
  }
}

/* 全局样式，不使用 scoped */
.el-popper.el-select__popper {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;

  .el-scrollbar {
    background-color: var(--bg-secondary) !important;
  }

  .el-select-dropdown__wrap {
    background-color: var(--bg-secondary) !important;
  }
  
  .el-select-dropdown__item {
    color: var(--text-secondary) !important;
    background-color: var(--bg-secondary) !important;
    
    &:hover,
    &.hover {
      background-color: var(--bg-primary) !important;
      color: var(--primary-color) !important;
    }
    
    &.selected {
      color: var(--primary-color) !important;
      font-weight: bold;
      background-color: var(--bg-primary) !important;
    }
  }

  .el-popper__arrow::before {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
  }
}

// 分页选择器下拉框样式
.el-select-dropdown.el-select__popper[x-placement^="bottom"] {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;

  .el-select-dropdown__list {
    background-color: var(--bg-secondary) !important;
  }

  .el-select-dropdown__item {
    color: var(--text-secondary) !important;
    background-color: var(--bg-secondary) !important;

    &:hover,
    &.hover {
      background-color: var(--bg-primary);
      color: var(--primary-color);
    }

    &.selected {
      color: var(--primary-color);
      font-weight: bold;
      background-color: var(--bg-primary);
    }
  }

  .el-scrollbar {
    background-color: var(--bg-secondary) !important;
  }

  .el-scrollbar__view {
    background-color: var(--bg-secondary) !important;
  }

  .el-popper__arrow::before {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
  }
}
</style>

<style lang="scss" scoped>
.schedule-container {
  padding: 20px;

  .search-bar {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--bg-primary);
    border-radius: 4px;

    :deep(.el-input__wrapper),
    :deep(.el-select__wrapper) {
      background-color: var(--bg-primary);
      box-shadow: 0 0 0 1px var(--border-color);
    }

    :deep(.el-input__wrapper.is-focus),
    :deep(.el-select__wrapper.is-focus) {
      box-shadow: 0 0 0 1px var(--primary-color);
    }

    :deep(.el-input__wrapper:hover),
    :deep(.el-select__wrapper:hover) {
      box-shadow: 0 0 0 1px var(--primary-color);
    }

    :deep(.el-form-item__label) {
      color: var(--text-secondary);
    }
  }

  .toolbar {
    margin-bottom: 20px;
  }

  :deep(.el-table) {
    margin-bottom: 20px;
    background-color: var(--bg-primary);
    border: none;
    
    --el-table-border-color: transparent;
    --el-table-border: none;
    
    .el-table__header th {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-color);
    }
    
    .el-table__row {
      background-color: var(--bg-primary);
      color: var(--text-primary);
      
      td {
        border-color: var(--border-color);
      }
      
      &:hover > td {
        background-color: var(--bg-secondary) !important;
      }
    }

    &::before,
    &::after {
      display: none;
    }
    
    .el-table__inner-wrapper::before {
      display: none;
    }

    .el-table__cell {
      border-right: none;
    }
  }

  // 标签样式优化
  :deep(.el-tag) {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    
    &.el-tag--info {
      background-color: rgba(144, 147, 153, 0.1);
      border-color: rgba(144, 147, 153, 0.2);
      color: #909399;
    }
    
    &.el-tag--primary {
      background-color: rgba(64, 158, 255, 0.1);
      border-color: rgba(64, 158, 255, 0.2);
      color: #409EFF;
    }
    
    &.el-tag--success {
      background-color: rgba(103, 194, 58, 0.1);
      border-color: rgba(103, 194, 58, 0.2);
      color: #67C23A;
    }
    
    &.el-tag--warning {
      background-color: rgba(230, 162, 60, 0.1);
      border-color: rgba(230, 162, 60, 0.2);
      color: #E6A23C;
    }
    
    &.el-tag--danger {
      background-color: rgba(245, 108, 108, 0.1);
      border-color: rgba(245, 108, 108, 0.2);
      color: #F56C6C;
    }

    // 暗色模式适配
    :root[data-theme='dark'] & {
      &.el-tag--info {
        background-color: rgba(144, 147, 153, 0.15);
        border-color: rgba(144, 147, 153, 0.3);
        color: #a6a9ad;
      }
      
      &.el-tag--primary {
        background-color: rgba(64, 158, 255, 0.15);
        border-color: rgba(64, 158, 255, 0.3);
        color: #79bbff;
      }
      
      &.el-tag--success {
        background-color: rgba(103, 194, 58, 0.15);
        border-color: rgba(103, 194, 58, 0.3);
        color: #85ce61;
      }
      
      &.el-tag--warning {
        background-color: rgba(230, 162, 60, 0.15);
        border-color: rgba(230, 162, 60, 0.3);
        color: #ebb563;
      }
      
      &.el-tag--danger {
        background-color: rgba(245, 108, 108, 0.15);
        border-color: rgba(245, 108, 108, 0.3);
        color: #f78989;
      }
    }
  }

  // 下拉框样式
  :deep(.el-select-dropdown.el-popper) {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    
    .el-select-dropdown__item {
      color: var(--text-secondary);
      
      &:hover,
      &.hover {
        background-color: var(--bg-primary);
        color: var(--primary-color);
      }
      
      &.selected {
        color: var(--primary-color);
        font-weight: bold;
        background-color: var(--bg-primary);
      }
    }

    .el-popper__arrow::before {
      background-color: var(--bg-secondary);
      border-color: var(--border-color);
    }
  }

  // 搜索栏下拉框样式
  .search-bar {
    :deep(.el-select) {
      .el-input__wrapper {
        background-color: var(--bg-secondary);
        box-shadow: none;
        border: 1px solid var(--border-color);

        &:hover {
          border-color: var(--primary-color);
        }

        &.is-focus {
          border-color: var(--primary-color);
        }
      }

      .el-input__inner {
        color: var(--text-primary);
      }
    }
  }

  // 标签悬停效果增强
  :deep(.el-tag) {
    transform: translateZ(0);
    backface-visibility: hidden;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }

  // 搜索栏动画
  .search-bar {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow);
    }
  }

  // 表格动画
  :deep(.el-table) {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-shadow);
    }
  }
}

// 全局下拉框样式（确保在任何位置都生效）
:global(.el-select-dropdown.el-popper) {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  
  .el-select-dropdown__item {
    color: var(--text-secondary);
    
    &:hover,
    &.hover {
      background-color: var(--bg-primary);
      color: var(--primary-color);
    }
    
    &.selected {
      color: var(--primary-color);
      font-weight: bold;
      background-color: var(--bg-primary);
    }
  }

  .el-popper__arrow::before {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
  }
}

// 日期选择器样式
:deep(.el-date-editor) {
  background-color: var(--bg-primary);
  
  .el-range-input {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  
  .el-range-separator {
    color: var(--text-secondary);
  }
}

// 分页器样式
:deep(.el-pagination) {
  .el-pagination__total,
  .el-pagination__jump {
    color: var(--text-secondary);
  }
  
  .el-input__wrapper {
    background-color: var(--bg-secondary);
    box-shadow: none;
    border: 1px solid var(--border-color);
  }
  
  .el-pager li {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;
    
    &:hover {
      color: var(--primary-color);
    }
    
    &.is-active {
      background-color: var(--primary-color);
      color: #fff;
    }
  }

  .btn-prev,
  .btn-next {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;

    &:disabled {
      background-color: var(--bg-secondary);
      color: var(--disabled-color);
    }
  }

  .el-select .el-select__popper {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    
    .el-select-dropdown__item {
      color: var(--text-secondary);
      
      &:hover,
      &.hover {
        background-color: var(--bg-primary);
      }
      
      &.selected {
        color: var(--primary-color);
        background-color: var(--bg-primary);
      }
    }
  }

  .el-pagination__editor.el-input {
    .el-input__wrapper {
      background-color: var(--bg-secondary);
      box-shadow: none;
      border: 1px solid var(--border-color);
    }
    
    .el-input__inner {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
  }
}

// 确保日期选择器弹出层在最上层
:global(.schedule-date-picker) {
  z-index: 3000 !important;
  
  .el-date-range-picker__content {
    background-color: var(--bg-primary);
  }
  
  .el-date-range-picker__header {
    color: var(--text-primary);
  }
  
  .el-date-table th,
  .el-date-table td {
    color: var(--text-primary);
  }
  
  .el-date-table td.available:hover {
    color: var(--primary-color);
  }
  
  .el-date-table td.current:not(.disabled) {
    background-color: var(--primary-color);
    color: #fff;
  }
}
</style> 